<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thylemeaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <script src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/form.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="css/indexCss.css">
    <link rel="stylesheet" href="css/fotter.css" />


    <title>有个名字叫智能汽车</title>

    <style>
        a:hover{text-decoration: none;}
    </style>


    <script>

        var carBrand = null;
        var money = null;
        var carType = null;

        var title = null;

        var age = null;
        var km = null;
        var standard = null;
        var displacement = null;
        var gearbox = null;
        var country = null;
        var colour = null;
        var capabilities = null;

        var $carBrandSelected = null;
        var $moneySelected = null;
        var $carTypeSelected = null;

        var currentPage = 1;


        /*
         * 读取参数的值
         */
        function getParameter(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = location.search.substr(1).match(reg);
            if (r != null) return (r[2]);
            return null;
        }

        function enterAnnounce(id){
            window.location.href="ShowShopping.html?id="+id;
        }

        $(function () {

            $("#seekBtn").click(function () {
                title = $("#seekEditText").val();
                execute(1);
                return false;
            });

            /*
                是否登录
            */
            $.ajax({
                // 编写json格式，设置属性和值
                url: "user/findUser",
                contentType: "application/json;charset=UTF-8",
                data: '',
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (!data.phone) {
                        $("#dis1")[0].style.display = "block";
                        $("#dis2")[0].style.display = "block";
                        $("#dis3")[0].style.display = "none";
                    } else {
                        $("#dis1")[0].style.display = "none";
                        $("#dis2")[0].style.display = "none";
                        $("#dis3")[0].style.display = "block";
                    }
                }
            })

            var othersFlag = false;
            $("#showOthers").click(function () {
                if (othersFlag == false) {
                    othersFlag = true;
                    $("#others")[0].style.display = "block";
                } else {
                    othersFlag = false;
                    $("#others")[0].style.display = "none";
                }
            })


            /*
                相关的category
            */
            $.ajax({
                // 编写json格式，设置属性和值
                url: "category/beanBTC",
                contentType: "application/json;charset=UTF-8",
                data: '',
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (!data) {
                        alert("网络延迟，请刷新！")
                    } else {
                        var brand = $("#brand");
                        var type = $("#type");
                        var category = $("#category");


                        for (var i = 0; i < 7; i++) {
                            brand.append("<li><a class='shownone' name=" + i + ">" + data.cateBrands[i].name + "</a></li>")
                        }
                        //brand.append("<td ><a id='moreId'>更多</a></td>");
                        brand.append("<li role='separator' class='divider'></li><li><a id='moreId' >更多</a></li>")
                        $("#moreId").click(function () {
                            $("#more")[0].style.display = "block";
                        })
                        for (var i = 0; i < data.cateBrands.length; i++) {

                            $("#moreDiv").append("<a class='shownone' name=" + i + " >" + data.cateBrands[i].name + "</a>");

                            if (i == data.cateBrands.length - 1) {
                                $("#moreDiv").append("<a class='shownone' >恢复默认</a>");
                            }
                        }

                        $(".shownone").click(function () {
                            $("#more")[0].style.display = "none";

                            if ($(this).html() === "恢复默认") {
                                carBrand = null;
                                if ($carBrandSelected != null) {
                                    var val = $carBrandSelected.attr("name");
                                    $("#carouselDiv a[name = " + val + "]").removeClass("selectedColor");
                                }
                                $carBrandSelected = null;
                                execute(1);
                                return;
                            }


                            if ($carBrandSelected != null) {
                                var val = $carBrandSelected.attr("name");
                                $("#carouselDiv a[name = " + val + "]").removeClass("selectedColor");

                            }
                            if ($carBrandSelected == null || $carBrandSelected.html() != $(this).html()) {
                                $carBrandSelected = $(this);
                                var val = $carBrandSelected.attr("name");
                                $("#carouselDiv a[name = " + val + "]").addClass("selectedColor");
                                carBrand = $(this).html();
                            } else {
                                $carBrandSelected = null;
                                carBrand = null;
                            }
                            //调用查询方法
                            title = null;
                            $("#seekEditText").val("");
                            execute(1);
                        });


                        for (var i = 0; i < data.carTypes.length; i++) {
                            //type.append("<td ><a class='showtype'>"+data.carTypes[i].name+"</a></td>");
                            type.append("<li><a class='showtype'>" + data.carTypes[i].name + "</a></li>")
                        }

                        $(".showtype").click(function () {

                            if ($carTypeSelected != null) {
                                $carTypeSelected.removeClass("selectedColor");
                            }
                            if ($carTypeSelected == null || $carTypeSelected.html() != $(this).html()) {
                                $carTypeSelected = $(this);
                                $carTypeSelected.addClass("selectedColor");
                                carType = $(this).html();
                            } else {
                                $carTypeSelected = null;
                                carType = null;
                            }

                            //调用查询方法
                            execute(1);
                        })

                        for (var i = 0; i < data.categories.length; i++) {
                            //category.append("<td ><a class='showmoney'>"+data.categories[i].name+"</a></td>");
                            category.append("<li><a class='showmoney'>" + data.categories[i].name + "</a></li>")
                        }

                        $(".showmoney").click(function () {


                            if ($moneySelected != null) {
                                $moneySelected.removeClass("selectedColor");
                            }
                            if ($moneySelected == null || $moneySelected.html() != $(this).html()) {
                                $moneySelected = $(this);
                                $moneySelected.addClass("selectedColor");
                                money = $(this).html();
                            } else {
                                $moneySelected = null;
                                money = null;
                            }

                            execute(1);
                        })


                    }
                }
            })

            if(getParameter("content")!=null){
                title = decodeUnicode(getParameter("content")) ;
                $("#seekEditText").val(title);
            }

            execute();

        })

        function decodeUnicode(str) {
            str = str.replace(/_/g,"\\u");
            str = str.replace(/\\/g, "%"); return unescape(str);
        }

        /*
            title ：标题
            carBrandId ：品牌
            money ： 价格
            catType ： 类型
            age ： 用的年龄
            km ： 公里
            standard ： 排放标准
            displacement ： 排量
            gearbox ： 变速箱
            country ： 国别
            colour ： 颜色
            capabilities ： 能源
            pageCount ： 第几页
        */
        function announce(title, carBrand, money, carType, age, km, standard, displacement, gearbox, country, colour, capabilities, pageCount) {

            var sendInfo = {
                title: title,
                carBrand: carBrand,
                money: money,
                carType: carType,
                age: age,
                km: km,
                standard: standard,
                displacement: displacement,
                gearbox: gearbox,
                country: country,
                colour: colour,
                capabilities: capabilities,
                pageCount: pageCount
            }

            $.ajax({
                // 编写json格式，设置属性和值
                url: "announce/seek",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(sendInfo),
                dataType: "json",
                type: "post",
                success: function (data) {
                    if (data != null)
                        $("#domain").empty();
                        for (var i = 0; i < data.announces.length; i++) {
                            $("#domain").append('<div class="col-sm-3 product" onclick="enterAnnounce('+data.announces[i].id+')"> ' +
                                '<div class="thumbnail image-hover img-shadow-1"> ' +
                                '<img style="width: 250px;height: 200px;" src="' + data.announces[i].imgs[0].path + '"/> ' +
                                '<p class="titleP" style="font-size: 16px;color: black;">' + data.announces[i].title + '</p> ' +
                                '<span style="color: #8D8D8D">'+data.announces[i].age+' | '+data.announces[i].km+'</span>' +
                                '</br>' +
                                '<font color="red" style="font-size: 20px;">￥' + data.announces[i].money + '</font> ' +
                                '</div> ' +
                                '</div>');
                        }


                        $("#paging").empty();
                        var totalPage = Math.ceil(data.totalCount / 12);

                        if (currentPage == 1)
                            $("#paging").append('<li class="page-item disabled"><a class="page-link" >上一页</a></li>');
                        else
                            $("#paging").append('<li class="page-item" onclick="execute(' + (currentPage - 1) + ')" ><a class="page-link" >上一页</a></li>');

                        if (data.totalCount != 0) {
                            var begin;
                            var end;
                            if (totalPage < 5) {
                                begin = 1;
                                end = totalPage;
                            } else {
                                begin = currentPage - 2;
                                end = currentPage + 2;

                                if (begin <= 0) {
                                    begin = 1;
                                    end = 5;
                                }

                                if (end > totalPage) {
                                    begin = totalPage - 4;
                                    end = totalPage;
                                }

                            }

                            for (var i = begin; i <= end; i++) {
                                if (currentPage == i)
                                    $("#paging").append('<li class="page-item active"><a class="page-link">' + i + '页</a></li>');
                                else
                                    $("#paging").append('<li class="page-item" onclick="execute(' + (i) + ')" ><a class="page-link">' + i + '页</a></li>');
                            }

                        } else {
                            $("#paging").append('<li class="page-item active"><a class="page-link" >1</a></li>');
                        }
                        if (currentPage == totalPage)
                            $("#paging").append('<li class="page-item disabled"><a class="page-link" >下一页</a></li>');
                        else
                            $("#paging").append('<li class="page-item" onclick="execute(' + (currentPage + 1) + ')" ><a class="page-link" >下一页</a></li>');

                    }

            });
        }

        function execute(pageCount) {
            if (!pageCount)
                pageCount = sessionStorage.getItem("page1")!=null?sessionStorage.getItem("page1"):1;
            sessionStorage.setItem("page1",pageCount);
            currentPage = parseInt(pageCount);
            announce(title, carBrand, money, carType, age, km, standard, displacement, gearbox, country, colour, capabilities, currentPage);
        }


        function agefun() {
            age = $('select[id=ageSelect] option:selected').val();
            if (age === "null")
                age = null;
            execute();
        }

        function kmfun() {
            km = $('select[id=kmSelect]  option:selected').val();
            if (km === "null")
                km = null;
            execute();
        }

        function standardfun() {
            standard = $('select[id=standardSelect]  option:selected').val();
            if (standard === "null")
                standard = null;
            execute();
        }

        function displacementfun() {
            displacement = $('select[id=displacementSelect]  option:selected').val();
            if (displacement === "null")
                displacement = null;
            execute();
        }

        function gearboxfun() {
            gearbox = $('select[id=gearboxSelect]  option:selected').val();
            if (gearbox === "null")
                gearbox = null;
            execute();
        }

        function countryfun() {
            country = $('select[id=countrySelect]  option:selected').val();
            if (country === "null")
                country = null;
            execute();
        }

        function colourfun() {
            colour = $('select[id=colourSelect]  option:selected').val();
            if (colour === "null")
                colour = null;
            execute();
        }

        function capabilitiesfun() {
            capabilities = $('select[id=capabilitiesSelect]  option:selected').val();
            if (capabilities === "null")
                capabilities = null;
            execute();
        }

    </script>


</head>

<body>

<div th:replace="header::#nav(activeUrl='index02.html')"></div>


<div>

</div>



<div style="display: none;" id="more">
    <div id="moreDiv">
    </div>
</div>

<!--轮播图-->
<div class="container-fluid" id="carouselDiv">


    <div id="leftMenu">
        <div class="btn-group">
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                汽车品牌 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="brand">

            </ul>
        </div>
        <div class="btn-group">
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                价格区间 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="category">

            </ul>
        </div>
        <div class="btn-group">
            <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                级别 <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" id="type">

            </ul>
        </div>

        <div class="btn-group">
            <button id="showOthers" class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                其他 <span class="caret"></span>
            </button>
            <div id="others">
                <table width="100%">
                    <tr class="choice">
                        <td class="sl">
                            <select id="ageSelect" onchange="agefun()">
                                <option value=null>车龄</option>
                                <option value="1年内">1年内</option>
                                <option value="2年内">2年内</option>
                                <option value="3年内">3年内</option>
                                <option value="3-5年">3-5年</option>
                                <option value="5-8年">5-8年</option>
                                <option value="8年以上">8年以上</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="kmSelect" onchange="kmfun()">
                                <option value=null>里程</option>
                                <option value="1万公里">1万公里</option>
                                <option value="3万公里">3万公里</option>
                                <option value="5万公里">5万公里</option>
                                <option value="10万公里">10万公里</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="standardSelect" onchange="standardfun()">
                                <option value=null>排放标准</option>
                                <option value="国一">国一</option>
                                <option value="国二">国二</option>
                                <option value="国三">国三</option>
                                <option value="国四">国四</option>
                                <option value="国五">国五</option>
                                <option value="国六">国六</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="displacementSelect" onchange="displacementfun()">
                                <option value=null>排量</option>
                                <option value="1.0升以下">1.0升以下</option>
                                <option value="1.1-1.5升">1.1-1.5升</option>
                                <option value="1.6-2.0升">1.6-2.0升</option>
                                <option value="2.1-3.0升">2.1-3.0升</option>
                                <option value="3.1升以上">3.1升以上</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="gearboxSelect" onchange="gearboxfun()">
                                <option value=null>变速箱</option>
                                <option value="手动">手动</option>
                                <option value="自动">自动</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="countrySelect" onchange="countryfun()">
                                <option value=null>国别</option>
                                <option value="中国">中国</option>
                                <option value="美国">美国</option>
                                <option value="日本">日本</option>
                                <option value="日本">英国</option>
                                <option value="加拿大">加拿大</option>
                                <option value="韩国">韩国</option>
                                <option value="瑞士">瑞士</option>
                                <option value="墨西哥">墨西哥</option>
                                <option value="法国">法国</option>
                                <option value="德国">德国</option>
                                <option value="澳大利亚">澳大利亚</option>
                                <option value="瑞典">瑞典</option>
                                <option value="巴西">巴西</option>
                                <option value="意大利">意大利</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="colourSelect" onchange="colourfun()">
                                <option value=null>颜色</option>
                                <option value="红色">红色</option>
                                <option value="黑色">黑色</option>
                                <option value="白色">白色</option>
                                <option value="香槟色">香槟色</option>
                                <option value="银色">银色</option>
                                <option value="咖啡色">咖啡色</option>
                                <option value="银灰色">银灰色</option>
                                <option value="紫色">紫色</option>
                                <option value="黄色">黄色</option>
                            </select>
                        </td>
                        <td class="sl">
                            <select id="capabilitiesSelect" onchange="capabilitiesfun()">
                                <option value=null>能源</option>
                                <option value="汽油">汽油</option>
                                <option value="柴油">柴油</option>
                                <option value="油气混动">油气混动</option>
                                <option value="油电混动">油电混动</option>
                                <option value="纯电动">纯电动</option>
                                <option value="天然气">天然气</option>
                                <option value="插电混动">插电混动</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <div id="myCarousel" class="carousel slide imgSize" data-ride="carousel" align="center"
         style="display: inline-block;">

        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="img/icon1.jpg" alt="...">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="img/icon2.jpg" alt="...">
                <div class="carousel-caption"></div>
            </div>
            <div class="item">
                <img src="img/icon3.jpg" alt="...">
                <div class="carousel-caption"></div>
            </div>
        </div>
    </div>

</div>

<!--主题部分-->
<div class="container" id="shoppingDomain">
    <div class="row jx" id="goods">
        <fieldset class="layui-elem-field layui-field-title site-demo-button" style="margin-top: 30px;">
            <blockquote class="layui-elem-quote">
                最新上架
            </blockquote>
        </fieldset>


    </div>
    <div id="domain">


    </div>
</div>

<!--页脚部分，写作者，图片还有各种介绍-->
<div class="text-center" id="pageId">
    <!--翻页条-->
    <ul class="pagination pagination-lg" id="paging">

    </ul>
</div>

<div th:replace="header::footer"></div>


<script type="text/javascript" src="./layui/layui.all.js"></script>

</body>
</html>